<template>
  <!-- 游客来源地页面 -->
  <div class="box1">
    <div class="box1-left">
      <div class="left1-top">
        <DetailCon10C></DetailCon10C>
      </div>
      <div class="left-bottom">
        <div class="content04-left-list">
          <div class="content04-list-item" v-for="item in content04" :key="item.id">
            <div class="item-content">
              <span class="serial">{{ item.serial }}</span>
              <span class="place">{{ item.start }}</span>
              <img src="../../../public/imgs/three.png" alt="">
              <span class="place">{{ item.end }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="box1-right">
      <div class="right1-top">
        <DetailCon10D></DetailCon10D>
      </div>
      <div class="right-bottom">
        <div class="content04-right-list">
          <div class="content04-list-item" v-for="item in content04_right" :key="item.id">
            <div class="item-content">
              <span class="serial">{{ item.serial }}</span>
              <span class="place">{{ item.start }}</span>
              <img src="../../../public/imgs/three.png" alt="">
              <span class="place">{{ item.end }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import DetailCon10C from './DetailCon10C.vue';
import DetailCon10D from './DetailCon10D.vue';

export default {
  data() {
    return {
      content04: [
        { id: 8, start: '吉林省', end: '吉林市', serial: 1 },
        { id: 9, start: '安徽省', end: '芜湖市', serial: 2 },
        { id: 10, start: '广东省', end: '深圳市', serial: 3 },
        { id: 11, start: '广西省', end: '北海市', serial: 4 },
        { id: 11, start: '山西省', end: '太原市', serial: 5 },
        { id: 11, start: '陕西省', end: '西安', serial: 6 },
        { id: 11, start: '河南省', end: '郑州市', serial: 7 },
      ],
      content04_right: [
        { id: 12, start: '武汉市', end: '东西湖区、东西湖区', serial: 1 },
        { id: 13, start: '黄石市', end: '黄石港区、西塞石区', serial: 2 },
        { id: 14, start: '十堰市', end: '张湾区、茅箭区', serial: 3 },
        { id: 15, start: '宜昌市', end: '当阳市、宜都市', serial: 4 },
        { id: 15, start: '宜昌市', end: '当阳市、梁子湖区', serial: 5 },
        { id: 15, start: '宜昌市', end: '当阳市、梁子湖区', serial: 6 },
        { id: 15, start: '宜昌市', end: '当阳市、梁子湖区', serial: 7 },
      ],
    };
  },
  components: {
    DetailCon10C,
    DetailCon10D,
  },
};
</script>

<style lang="scss" scoped>
.box1 {
  display: flex;
  justify-content: space-around;
  width: 100%;
}

.box1-left, .box1-right {
  display: flex;
  flex-direction: column;
  width: 45%;
}

.left1-top, .right1-top {
  margin-bottom: 20px;
}

.content04-left-list, .content04-right-list {
  display: flex;
  flex-direction: column;
}

.content04-list-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  justify-content: center; /* 居中显示 */
}

.item-content {
  display: flex;
  align-items: center;
  font-size: 16px;
}

.serial {
  margin-right: 10px;
  font-size: 20px; /* 增大字体 */
}

.place {
  margin-right: 10px;
  font-size: 20px; /* 增大字体 */
}

img {
  margin-right: 10px;
}
</style>
